<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>环保局测试系统</title>
		<!-- 引入vue -->
		<script src="./js/vue.js"></script>
		<!-- 引入element ui 样式 -->
		<!--link 标签定义文档与外部资源的关系。此元素只能存在于 head 部分 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入element ui 组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入 ECharts 文件 -->
		<script src="./js/echarts.js"></script>
		<script src="./js/china.js"></script>
		
		<!-- 引入v-echarts -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css"> -->
	</head>
	
	
		
	<body>
		<div id="app">
			<!-- 第一行 -->
			<el-row :gutter="20">
				<el-col :span="7">
					<div >
						<span>{{currentTime}}</span>
						<div style="text-align: center;">
							<h3 >油站信息</h3>
							<span>油站总数：12</span> <span>今日在线油站：1</span>
						</div>
						<div id="echarts1" style="width:300px;height: 300px;background-color: #ffffff;margin: auto;"></div>
						<h3 style="text-align: center;">长期未在线TOP5</h3>
						<el-table  :data="offlineTime" style="width: 100%">
							<el-table-column prop="name" label="名称" width="360">
							</el-table-column>
							<el-table-column prop="time" label="未在线时间" width="240">
							</el-table-column>
						</el-table>
					</div>
				</el-col>
				<el-col :span="11">
					<div >
						<h3>油站环保数据概览-map</h3>
						<div id="echarts2" style="width:700px;height: 800px;"></div>
					</div>
				</el-col>
				<el-col :span="6">
					<div >
						<h3>油站环保数据概览</h3>
						<div id="echarts3" style="width:400px;height: 400px;"></div>
					</div>
				</el-col>
			</el-row>
			<!-- 第二行 -->
			<el-row :gutter="20">
				<el-col :span="16">
					<div class="grid-content bg-purple">
						<el-table :data="longtable" style="width: 100%">
							<el-table-column prop="date" label="日期" width="180"></el-table-column>
							<el-table-column prop="gasname" label="油站名" width="150"></el-table-column>
							<el-table-column prop="油机号" label="油机号" width="80"></el-table-column>
							<el-table-column prop="枪号" label="枪号" width="80"></el-table-column>
							<el-table-column prop="燃油量" label="燃油量" width="80"></el-table-column>
							<el-table-column prop="油气量" label="油气量" width="80"></el-table-column>
							<el-table-column prop="燃油流速" label="燃油流速" width="80"></el-table-column>
							<el-table-column prop="油气流速" label="油气流速" width="80"></el-table-column>
							<el-table-column prop="气液比" label="气液比" width="80"></el-table-column>
						</el-table>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple">
						<el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" style="width: 200px;"></el-image>
						<el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" style="width: 200px;"></el-image>
					</div>
				</el-col>
			</el-row>
		</div>
	</body>
	
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				offlineTime: [{
							"name": "中牟加油站",
							"time": "6天前"
						},
						{
							"name": "新郑加油站",
							"time": "6天前"
						},
						{
							"name": "中原区A加油站",
							"time": "昨天"
						}
					],
				longtable:[{
							"date": "2020-10-21 14:58:56",
							"gasname": "荥阳B加油站",
							"油机号": 1,
							"枪号": 1,
							"燃油量": 30.16,
							"油气量": 27.85,
							"燃油流速": 23.44,
							"油气流速": 12.22,
							"气液比": 0.92
						},
						{
							"date": "2020-10-21 14:58:56",
							"gasname": "荥阳B加油站",
							"油机号": 1,
							"枪号": 1,
							"燃油量": 30.16,
							"油气量": 27.85,
							"燃油流速": 23.44,
							"油气流速": 12.22,
							"气液比": 0.92
						}
					],
				currentTime: "",
				timer: "", //定义一个定时器的变量
			},
			/**
			 * 获取当前时间，并每隔一秒刷新一次
			 * */
			created() {
				this.$nextTick(() => {
					// 在此处执行你要执行的函数 
					vm.timer = setInterval(() => {
						var that = this;
						var myDate = new Date();
						var time = myDate.toLocaleString(); //获取日期与时间
						var Week = ['日', '一', '二', '三', '四', '五', '六'];
						time += "   星期" + Week[myDate.getDay()] //获取当前星期X(0-6,0代表星期天)
						// console.log("time: " + currentTime);
						that.currentTime = time;
					}, 1000);
				});
			},
			mounted: function() {
				this.testEcharts1();
			},
			methods: {
				testEcharts1: function() {
					// 基于准备好的dom，初始化echarts实例
					let myChart = echarts.init(document.getElementById('echarts1'));

					// 指定图表的配置项和数据
					var option = {
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b}: {c} ({d}%)'
						},
						legend: {
							orient: 'vertical',
							left: 10,
							data: []
						},
						series: [{
							name: '访问来源',
							type: 'pie',
							radius: ['35%', '70%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '25',
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: [{
									value: 335,
									name: '直接访问'
								},
								{
									value: 158,
									name: '搜索引擎'
								}
							]
						}]
					};
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			},
			beforeDestroy() {
				if (this.timer) {
					// 在Vue实例销毁前，清除我们的定时器
					clearInterval(this.timer); 
				}
			}
		})
	</script>
</html>
